<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Patronum</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Le styles -->
    <script type="text/javascript" src="assets/js/jquery.js"></script>

    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/loader-style.css">
    <link rel="stylesheet" href="assets/css/bootstrap.css">



    <link rel="stylesheet" href="assets/css/mail.css">
    <link rel="stylesheet" href="assets/js/button/ladda/ladda.min.css">
    <style type="text/css">
        .button-demo, .progress-demo {
            display: inline-block;
            margin-right: 3px;
            margin-bottom: 20px;
        }
    </style>

<style type="text/css">
    .sz{
        text-align: center;
        font-size: 20px;
    }
    .jy{
        font-size: 17px;
        margin: 8px;
    }
    .sj{
        font-size: 16px;
    }
</style>


    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <![endif]-->
    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/minus.png">
</head>

<body><div id="awwwards" class="right black"><a href="http://www.awwwards.com/best-websites/apricot-navigation-admin-dashboard-template" target="_blank">best websites of the world</a></div>
    <!-- Preloader -->
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>
    <!-- TOP NAVBAR -->
<nav role="navigation" class="navbar navbar-static-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle" type="button">
                <span class="entypo-menu"></span>
            </button>
            <button class="navbar-toggle toggle-menu-mobile toggle-left" type="button">
                <span class="entypo-list-add"></span>
            </button>




            <div id="logo-mobile" class="visible-xs">
                <h1>WEB管理<span>v1.2</span></h1>
            </div>

        </div>


        <!-- Collect the nav links, forms, and other content for toggling -->
        <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">


            </ul>
            <div id="nt-title-container" class="navbar-left running-text visible-lg">
                <ul class="date-top">
                    <li class="entypo-calendar" style="margin-right:5px"></li>
                    <li id="Date"></li>


                </ul>

                <ul id="digital-clock" class="digital">
                    <li class="entypo-clock" style="margin-right:5px"></li>
                    <li class="hour"></li>
                    <li>:</li>
                    <li class="min"></li>
                    <li>:</li>
                    <li class="sec"></li>
                    <li class="meridiem"></li>
                </ul>
            </div>

            <ul style="margin-right:0;" class="nav navbar-nav navbar-right">
                <li>
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <span class="icon-gear"></span>&#160;&#160;Setting</a>
                    <ul role="menu" class="dropdown-setting dropdown-menu">

                        <li class="theme-bg">
                            <div id="button-bg"></div>
                            <div id="button-bg2"></div>
                            <div id="button-bg3"></div>
                            <div id="button-bg5"></div>
                            <div id="button-bg6"></div>
                            <div id="button-bg7"></div>
                            <div id="button-bg8"></div>
                            <div id="button-bg9"></div>
                            <div id="button-bg10"></div>
                            <div id="button-bg11"></div>
                            <div id="button-bg12"></div>
                            <div id="button-bg13"></div>
                        </li>
                    </ul>
                </li>
                <li class="hidden-xs">
                    <a class="toggle-left" href="#">
                        <span style="font-size:20px;" class="entypo-list-add"></span>
                    </a>
                </li>
            </ul>

        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>


<!-- /END OF TOP NAVBAR -->

    <!-- SIDE MENU -->
<div id="skin-select">
    <div id="logo">
        <h1>Patronumm</h1>
    </div>

    <a id="toggle">
        <span class="entypo-menu"></span>
    </a>



    <div class="skin-part">
        <div id="tree-wrap">
            <div class="side-bar">
                <ul class="topnav menu-left-nest">
                    <li>
                        <a href="#" style="border-left:0px solid!important;" class="title-menu-left">

                            <span class="widget-menu"></span>
                            <i data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>

                        </a>
                    </li>
                    <li>
                        <a class="tooltip-tip ajax-load" href="index.html" title="Media">
                            <i class="icon-camera" style="font-size: 17px!important;"></i>
                            <span>服务器物理信息</span>

                        </a>
                    </li>

                    <li>
                        <a class="tooltip-tip ajax-load" href="#" title="Blog App">
                            <i class="icon-document-edit"></i>
                            <span>优化报告</span>

                        </a>
                    </li>

                    <li>
                        <a class="tooltip-tip ajax-load" href="map.html" title="Social">
                            <i class="icon-feed" style="font-size: 17px!important;"></i>
                            <span>攻击事件回溯</span>

                        </a>
                    </li>

                </ul>

                <ul class="topnav menu-left-nest">
                    <li>
                        <a href="#" style="border-left:0px solid!important;" class="title-menu-left">

                            <span class="design-kit"></span>
                            <i data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>

                        </a>
                    </li>

                    <li>
                        <a class="tooltip-tip ajax-load" href="index.html" title="Dashboard">
                            <i class="icon-window" style="font-size: 17px!important;"></i>
                            <span>About us</span>

                        </a>
                    </li>
                    <!--
                    <li>
                        <a class="tooltip-tip ajax-load" href="mail.html" title="Mail">
                            <i class="icon-mail"></i>
                            <span>mail</span>
                            <div class="noft-blue">289</div>
                        </a>
                    </li>

                    <li>
                        <a class="tooltip-tip ajax-load" href="icon.html" title="Icons">
                            <i class="icon-preview"></i>
                            <span>Icons</span>
                            <div class="noft-blue" style="display: inline-block; float: none;">New</div>
                        </a>
                    </li>

                    <li>
                        <a class="tooltip-tip" href="#" title="Extra Pages">
                            <i class="icon-document-new"></i>
                            <span>About us</span>
                        </a>
                        <ul>
                            <li>
                                <a class="tooltip-tip2 ajax-load" href="blank_page.html" title="Blank Page"><i class="icon-media-record"></i><span>Blank Page</span></a>
                            </li>
                             <li>
                                <a class="tooltip-tip2 ajax-load" href="profile.html" title="Profile Page"><i class="icon-user"></i><span>Profile Page</span></a>
                            </li>
                            <li>
                                <a class="tooltip-tip2 ajax-load" href="invoice.html" title="Invoice"><i class="entypo-newspaper"></i><span>Invoice</span></a>
                            </li>
                            <li>
                                <a class="tooltip-tip2 ajax-load" href="pricing_table.html" title="Pricing Table"><i class="fontawesome-money"></i><span>Pricing Table</span></a>
                            </li>
                            <li>
                                <a class="tooltip-tip2 ajax-load" href="time-line.html" title="Time Line"><i class="entypo-clock"></i><span>Time Line</span></a>
                            </li>
                            <li>
                                <a class="tooltip-tip2" href="404.html" title="404 Error Page"><i class="icon-thumbs-down"></i><span>404 Error Page</span></a>
                            </li>
                            <li>
                                <a class="tooltip-tip2" href="500.html" title="500 Error Page"><i class="icon-thumbs-down"></i><span>500 Error Page</span></a>
                            </li>
                            <li>
                                <a class="tooltip-tip2" href="lock-screen.html" title="Lock Screen"><i class="icon-lock"></i><span>Lock Screen</span></a>
                            </li>
                        </ul>
                    </li>
-->
                    <li>
                        <a class="tooltip-tip " href="login.html" title="login">
                            <i class="icon-download " style="font-size: 17px!important;"></i>
                            <span>切换服务器</span>
                        </a>
                    </li>

                </ul>

                <ul id="menu-showhide" class="topnav menu-left-nest">
                    <li>
                        <a href="#" style="border-left:0px solid!important;" class="title-menu-left">

                            <span class="component"></span>
                            <i data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>

                        </a>
                    </li>


                                            <li>
                                                <a class="tooltip-tip" href="#" title="UI Element">
                                                    <i class="icon-monitor"></i>
                                                    <span>退出登录</span>
                                                </a>
                                                <!--
                                               <ul>
                                                   <li>
                                                       <a class="tooltip-tip2 ajax-load" href="element.html" title="Element"><i class="icon-attachment"></i><span>Element</span></a>
                                                   </li>
                                                   <li><a class="tooltip-tip2 ajax-load" href="button.html" title="Button"><i class="icon-view-list-large"></i><span>Button</span> <div class="noft-blue-number">10</div></a>
                                                   </li>
                                                   <li>
                                                       <a class="tooltip-tip2 ajax-load" href="wizard.html" title="Tab & Accordion"><i class="icon-folder"></i><span>Wizard</span><div class="noft-purple-number">3</div></a>
                                                   </li>
                                                   <li>
                                                       <a class="tooltip-tip2 ajax-load" href="calendar.html" title="Calender"><i class="icon-calendar"></i><span>Calendar</span></a>
                                                   </li>
                                                   <li>
                                                       <a class="tooltip-tip2 ajax-load" href="tree.html" title="Tree View"><i class="icon-view-list"></i><span>Tree View</span></a>
                                                   </li>
                                                   <li>
                                                       <a class="tooltip-tip2 ajax-load" href="grids.html" title="Grids"><i class="icon-menu"></i><span>Grids</span></a>
                                                   </li>
                                                   <li>
                                                       <a class="tooltip-tip2 ajax-load" href="chart.html" title="Chart"><i class="icon-graph-pie"></i><span>Chart</span></a>
                                                   </li>
                                                   <li>
                                                       <a class="tooltip-tip ajax-load" href="typhography.html" title="Typhoghrapy">
                                                           <i class="icon-information"></i>
                                                           <span>Typhoghrapy</span>
                                                       </a>
                                                   </li>
                                               </ul>
                                               -->
                                           </li>
                                           <li>
                                               <a class="tooltip-tip" href="#" title="Form">
                                                   <i class="icon-document"></i>
                                                   <span>更改密码</span>
                                               </a>
                                               <!--
                                              <ul>
                                                  <li>
                                                      <a class="tooltip-tip2 ajax-load" href="form-element.html" title="Form Elements"><i class="icon-document-edit"></i><span>Form Elements</span></a>
                                                  </li>
                                                  <li>
                                                      <a class="tooltip-tip2 ajax-load" href="andvance-form.html" title="Andvance Form"><i class="icon-map"></i><span>Andvance Form</span></a>
                                                  </li>
                                                  <li>
                                                      <a class="tooltip-tip2 ajax-load" href="text-editor.html" title="Text Editor"><i class="icon-code"></i><span>Text Editor</span></a>
                                                  </li>
                                                  <li>
                                                      <a class="tooltip-tip2 ajax-load" href="file-upload.html" title="File Upload"><i class="icon-upload"></i><span>File Upload</span></a>
                                                  </li>
                                              </ul>
                                              -->
                                          </li>
                                          <li>
                                              <a class="tooltip-tip" href="#" title="Tables">
                                                  <i class="icon-view-thumb"></i>
                                                  <span>绑定服务器</span>
                                              </a>
                                              <!--
                                             <ul>
                                                 <li>
                                                     <a class="tooltip-tip2 ajax-load" href="table-static.html" title="Table Static"><i class="entypo-layout"></i><span>Table Static</span></a>
                                                 </li>
                                                 <li>
                                                     <a class="tooltip-tip2 ajax-load" href="table-dynamic.html" title="Table Dynamic"><i class="entypo-menu"></i><span>Table Dynamic</span></a>
                                                 </li>
                                             </ul>
                                             -->
                                         </li>

                                         <li>
                                             <a class="tooltip-tip ajax-load" href="map.html" title="Map">
                                                 <i class="icon-location"></i>
                                                 <span>服务期定位</span>

                                             </a>
                                         </li>
                                     </ul>

                <!--
                                                    <div class="side-dash">
                                                        <h3>
                                                            <span>Device</span>
                                                        </h3>
                                                        <ul class="side-dashh-list">
                                                            <li>Avg. Traffic
                                                                <span>25k<i style="color:#44BBC1;" class="fa fa-arrow-circle-up"></i>
                                                                </span>
                                                            </li>
                                                            <li>Visitors
                                                                <span>80%<i style="color:#AB6DB0;" class="fa fa-arrow-circle-down"></i>
                                                                </span>
                                                            </li>
                                                            <li>Convertion Rate
                                                                <span>13m<i style="color:#19A1F9;" class="fa fa-arrow-circle-up"></i>
                                                                </span>
                                                            </li>
                                                        </ul>
                                                        <h3>
                                                            <span>Traffic</span>
                                                        </h3>
                                                        <ul class="side-bar-list">
                                                            <li>Avg. Traffic
                                                                <div class="linebar">5,7,8,9,3,5,3,8,5</div>
                                                            </li>
                                                            <li>Visitors
                                                                <div class="linebar2">9,7,8,9,5,9,6,8,7</div>
                                                            </li>
                                                            <li>Convertion Rate
                                                                <div class="linebar3">5,7,8,9,3,5,3,8,5</div>
                                                            </li>
                                                        </ul>
                                                        <h3>
                                                            <span>Visitors</span>
                                                        </h3>
                                                        <div id="g1" style="height:180px" class="gauge"></div>
                                                    </div>
                                                    -->
            </div>
        </div>
    </div>
</div>
    <!-- END OF SIDE MENU -->



    <!--  PAPER WRAP -->
    <div class="wrap-fluid">
        <div class="container-fluid paper-wrap bevel tlbr">





            <!-- CONTENT -->
            <!--TITLE -->
            <div class="row">
                <div id="paper-top">
                    <div class="col-sm-3">
                        <h2 class="tittle-content-header">
                            <i class="icon-mail"></i> 
                            <span>Mail
                            </span>
                        </h2>

                    </div>

                    <div class="col-sm-2">
                        <div class="devider-vertical visible-lg"></div>
                        <div class="btn-group btn-wigdet pull-right visible-lg">
                            <div class="btn">
                                Widget</div>
                            <button data-toggle="dropdown" class="btn dropdown-toggle" type="button">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul role="menu" class="dropdown-menu">
                                <li>
                                    <a href="#">
                                        <span class="entypo-plus-circled margin-iconic"></span>Add New</a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="entypo-heart margin-iconic"></span>Favorite</a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="entypo-cog margin-iconic"></span>Setting</a>
                                </li>
                            </ul>
                        </div>


                    </div>
                </div>
            </div>
            <!--/ TITLE -->

            <!-- BREADCRUMB -->
            <ul id="breadcrumb">
                <li>
                    <span class="entypo-home"></span>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">Index</a>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">Journal</a>
                </li>

            </ul>

            <!-- END OF BREADCRUMB -->



            <div class="content-wrap">
                <div class="row">
                    <!-- SIDEMENU MAIL -->
                    <div class="col-sm-2">
                        <div class="side-mail">
                            <div class="btn btn-info button-mail" data-toggle="modal" data-target="#myModal"><i class="entypo-pencil"></i>&nbsp;&nbsp;Journal</div>
                            <div class="list-btn-mail active">
                                <span class="entypo-download"></span><a>总报告数</a><i>648</i>
                            </div>
                            <div class="list-btn-mail">
                                <span class="entypo-floppy"></span><a>危险报告</a><i>5</i>
                            </div>
                            <div class="list-btn-mail">
                                <span class="entypo-logout"></span><a>优化报告</a><i>12</i>
                            </div>
                            <div class="list-btn-mail">
                                <span class="entypo-trash"></span><a>垃圾箱</a><i>22</i>
                            </div>
                            <div class="list-btn-mail">
                                <span class="entypo-alert"></span><a>已处理报告</a><i>123</i>
                            </div>

                        </div>




                        <div aria-labelledby="myLargeModalLabel" role="dialog" tabindex="-1" class="modal fade bs-example-modal-lg" style="display: none;" id="myModal">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">

                                    <div class="modal-header">
                                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">
                                            <span class="entypo-cancel"></span>
                                        </button>
                                        <h6 id="myLargeModalLabel" class="modal-title">Read Journal</h6>
                                    </div>
                                    <div class="modal-body">

                                        <div class="compose_mail">

                                            <form role="form">
                                                <div class="form-group">

                                                    <input type="email" placeholder="To" id="exampleInputEmail1" class="form-control">
                                                </div>
                                                <div class="form-group">

                                                    <input type="email" placeholder="Subject" id="exampleInputPassword1" class="form-control">
                                                </div>




                                                <div class="btn-group">
                                                    <button data-toggle="dropdown" class="btn dropdown-toggle" type="button">
                                                        <span class="fontawesome-font"></span>Normal text
                                                        <span class="caret"></span>
                                                    </button>
                                                    <ul role="menu" class="dropdown-menu">
                                                        <li><a href="#">Action</a>
                                                        </li>
                                                        <li><a href="#">Another action</a>
                                                        </li>
                                                        <li><a href="#">Something else here</a>
                                                        </li>

                                                    </ul>

                                                </div>
                                                <div class="btn-group">
                                                    <button type="button" class="btn">
                                                        <span class="fontawesome-bold"></span>
                                                    </button>
                                                    <button type="button" class="btn">
                                                        <span class="fontawesome-italic"></span>
                                                    </button>
                                                    <button type="button" class="btn">
                                                        <span class="fontawesome-underline"></span>
                                                    </button>
                                                </div>

                                                <div class="btn-group">
                                                    <button type="button" class="btn">
                                                        <span class="fontawesome-list-ul"></span>
                                                    </button>
                                                    <button type="button" class="btn">
                                                        <span class="fontawesome-list-ol"></span>
                                                    </button>
                                                    <button type="button" class="btn">
                                                        <span class="fontawesome-indent-left"></span>
                                                    </button>
                                                    <button type="button" class="btn">
                                                        <span class="fontawesome-indent-right"></span>
                                                    </button>

                                                </div>


                                                <button type="button" class="btn">
                                                    <span class="entypo-link"></span>
                                                </button>
                                                <button type="button" class="btn">
                                                    <span class="entypo-attach"></span>
                                                </button>
                                                <button type="button" class="btn">
                                                    <span class="fontawesome-table"></span>
                                                </button>
                                                <button type="button" class="btn">
                                                    <span class="fontawesome-camera"></span>
                                                </button>


                                                <textarea style="height:200px!important;margin:20px 0" class="form-control" rows="8"></textarea>


                                                <button class="btn" type="submit">Send</button>
                                                <button class="btn" type="submit">
                                                    <span class="fontawesome-save"></span>&nbsp;&nbsp;Save as Draft</button>
                                            </form>

                                        </div>

                                    </div>
                                </div>

                            </div>

                        </div>










                    </div>
                    <!-- /SIDEMENU MAIL -->
                    <!-- CONTENT MAIL -->
                    <div class="col-sm-10">

                        <div class="mail_header">
                            <div class="row">
                                <div class="col-sm-6">

                                    <div style="margin-right:10px" class="btn-group pull-left">
                                        <div class="btn">
                                            <input type="checkbox" style="margin:0 5px;padding:0;position:relative;top:2px;">All</div>
                                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                                            <span class="caret"></span>
                                            <span class="sr-only">Toggle Dropdown</span>
                                        </button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">None</a>
                                            </li>
                                            <li><a href="#">read</a>
                                            </li>
                                            <li><a href="#">Unread</a>
                                            </li>
                                        </ul>
                                    </div>



                                    <div style="margin-right:10px" class="btn-group pull-left">
                                        <button type="button" class="btn  dropdown-toggle" data-toggle="dropdown">More
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#"><i class="fa fa-pencil"></i> Mark as Read</a>
                                            </li>
                                            <li><a href="#"><i class="fa fa-ban"></i> Spam</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a>
                                            </li>
                                        </ul>
                                    </div>

                                    <button style="margin-right:10px" type="button" data-color="#39B3D7" data-opacity="0.95" class="btn button test pull-left">
                                        <span class="entypo-arrows-ccw"></span>&nbsp;&nbsp;Refresh</button>


                                </div>


                                <div class="col-sm-6">



                                    <div class="btn-group pull-right">
                                        <button type="button" class="btn">
                                            <span class="entypo-left-open"></span>
                                        </button>
                                        <button type="button" class="btn">
                                            <span class="entypo-right-open"></span>
                                        </button>

                                    </div>

                                    <div class="btn-group pull-right" style="margin-right:10px;">
                                        <button type="button" class="btn">1-50 of 124</button>


                                    </div>

                                </div>


                            </div>

                        </div>

                        <div id="content-mail">
                            <div class="table-responsive">
                                <!-- THE MESSAGES -->
                                <table class="table table-mailbox">
                                    <tr class="unread">
                                        <td class="small-col">
                                            <input type="checkbox">
                                        </td>
                                        <td class="sz">1</td>
                                        <td><button data-toggle="dropdown" class="btn btn-danger" type="button">Danger
                                        </button>
                                        </td>

                                        <td class="subject jy">
                                            <p class="email-summary">
                                                受到来自IP为138.68.51.71的多次sql注入攻击，请及时处理</p>
                                        </td>
                                        <td class="time text-right sj">2017.4.10-12:21</td>
                                    </tr>

                                    <tr class="unread">
                                        <td class="small-col">
                                            <input type="checkbox">
                                        </td>
                                        <td class="sz">2</td>
                                        <td><button type="button" class="btn btn-opm">Suggestion</button>
                                        </td>
                                        <td class="subject jy">
                                            <p class="email-summary">
                                                你的磁盘占用率过高，请及时清理！</p>
                                        </td>
                                        <td class="time text-right sj">2017.3.29-13:08</td>
                                    </tr>


                                    <tr class="unread">
                                        <td class="small-col">
                                            <input type="checkbox">
                                        </td>
                                        <td class="sz">3</td>
                                        <td><button type="button" class="btn btn-danger">Danger
                                            </button>
                                        </td>
                                        <td class="subject jy">
                                            <p class="email-summary">
                                                在2017.3.21-21:20左右cpu，内存使用率过高，检测到来自IP为10.177.96.164可能受到Ddos攻击，请及时处理</p>
                                        </td>
                                        <td class="time text-right sj">2017.3.22-08:20</td>
                                    </tr>


                                    <tr class="unread">
                                        <td class="small-col">
                                            <input type="checkbox">
                                        </td>
                                        <td class="sz">4</td>
                                        <td>
                                            <button data-toggle="dropdown" class="btn btn-ldanger" type="button">Suggestion
                                            </button>
                                        </td>

                                        <td class="subject jy">
                                            <p class="email-summary">
                                                检测到您开放了135端口，为了服务器安全请您关闭此端口。</p>
                                        </td>
                                        <td class="time text-right sj">2017.3.15-07:19</td>
                                    </tr>


                                    <tr class="unread">
                                        <td class="small-col">
                                            <input type="checkbox">
                                        </td>
                                        <td class="sz">5</td>
                                        <td><button data-toggle="dropdown" class="btn btn-ldanger" type="button">Suggestion
                                        </button>
                                        </td>

                                        <td class="subject jy">
                                            <p class="email-summary">
                                                服务器在2017.2.56-15:45网站出入流量较大，请注意</p>
                                        </td>
                                        <td class="time text-right sj">2017.3.05-09:55</td>
                                    </tr>

                                    <tr class="unread">
                                        <td class="small-col">
                                            <input type="checkbox">
                                        </td>
                                        <td class="sz">6</td>
                                        <td><button type="button" class="btn btn-danger">Danger</button>
                                        </td>

                                        <td class="subject jy">
                                            <p class="email-summary">
                                                受到来自IP为121.42.195.7的多次xss攻击，请及时处理</p>
                                        </td>
                                        <td class="time text-right sj">2017.2.16-14:12</td>
                                    </tr>


                                    <tr class="unread">
                                        <td class="small-col">
                                            <input type="checkbox">
                                        </td>
                                        <td class="sz">7</td>
                                        <td><button data-toggle="dropdown" class="btn btn-default" type="button">Danger
                                        </button>
                                        </td>

                                        <td class="subject jy">
                                            <p class="email-summary">受到来自IP为121.42.195.7的多次sql注入攻击，请及时处理</p>
                                        </td>
                                        <td class="time text-right sj">2017.2.16-18:46</td>
                                    </tr>

                                    <tr class="unread">
                                        <td class="small-col">
                                            <input type="checkbox">
                                        </td>
                                        <td class="sz">8</td>
                                        <td><button type="button" class="btn btn-ldanger">Suggestion</button>
                                        </td>

                                        <td class="subject jy">
                                            <p class="email-summary">
                                                最近一个月来自全球的访问记录已经图形化，请到攻击回溯页面查看！</p>
                                        </td>
                                        <td class="time text-right sj">2017.1.28-05:46</td>
                                    </tr>

                                    <tr class="unread">
                                        <td class="small-col">
                                            <input type="checkbox">
                                        </td>
                                        <td class="sz">9</td>
                                        <td><button type="button" class="btn btn-default">Solved</button>
                                        </td>

                                        <td class="subject jy">
                                            <p class="email-summary">
                                                CPU温度过高，请注意及时清理磁盘并检查风扇！</p>
                                        </td>
                                        <td class="time text-right sj">2017.1.25-06:45</td>
                                    </tr>

                                    <!-- TWO -->


                                    <!-- END OF TWO -->
                                    <!-- THREE -->

                                    <!-- END OF THREE -->


                                </table>
                            </div>
                            <!-- /.table-responsive -->


                        </div>

                    </div>
                    <!-- /CONTENT MAIL -->
                </div>
            </div>


            <!-- /END OF CONTENT -->



            <!-- FOOTER -->
            <!-- / END OF FOOTER -->

        </div>
    </div>
    <!--  END OF PAPER WRAP -->

    <!-- RIGHT SLIDER CONTENT -->
    <div class="sb-slidebar sb-right">
        <div class="right-wrapper">
            <div class="row">
                <h3>
                    <span><i class="entypo-gauge"></i>&nbsp;&nbsp;MAIN WIDGET</span>
                </h3>
                <div class="col-sm-12">

                    <div class="widget-knob">
                        <span class="chart" style="position:relative" data-percent="86">
                            <span class="percent"></span>
                        </span>
                    </div>
                    <div class="widget-def">
                        <b>Distance traveled</b>
                        <br>
                        <i>86% to the check point</i>
                    </div>

                    <div class="widget-knob">
                        <span class="speed-car" style="position:relative" data-percent="60">
                            <span class="percent2"></span>
                        </span>
                    </div>
                    <div class="widget-def">
                        <b>The average speed</b>
                        <br>
                        <i>30KM/h avarage speed</i>
                    </div>


                    <div class="widget-knob">
                        <span class="overall" style="position:relative" data-percent="25">
                            <span class="percent3"></span>
                        </span>
                    </div>
                    <div class="widget-def">
                        <b>Overall result</b>
                        <br>
                        <i>30KM/h avarage Result</i>
                    </div>
                </div>
            </div>
        </div>

        <div style="margin-top:0;" class="right-wrapper">
            <div class="row">
                <h3>
                    <span><i class="entypo-chat"></i>&nbsp;&nbsp;CHAT</span>
                </h3>
                <div class="col-sm-12">
                    <span class="label label-warning label-chat">Online</span>
                    <ul class="chat">
                        <li>
                            <a href="#">
                                <span>
                                    <img alt="" class="img-chat img-circle" src="http://api.randomuser.me/portraits/thumb/men/20.jpg">
                                </span><b>Dave Junior</b>
                                <br><i>Last seen : 08:00 PM</i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>
                                    <img alt="" class="img-chat img-circle" src="http://api.randomuser.me/portraits/thumb/men/21.jpg">
                                </span><b>Kenneth Lucas</b>
                                <br><i>Last seen : 07:21 PM</i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>
                                    <img alt="" class="img-chat img-circle" src="http://api.randomuser.me/portraits/thumb/men/22.jpg">
                                </span><b>Heidi Perez</b>
                                <br><i>Last seen : 05:43 PM</i>
                            </a>
                        </li>


                    </ul>

                    <span class="label label-chat">Offline</span>
                    <ul class="chat">
                        <li>
                            <a href="#">
                                <span>
                                    <img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/men/23.jpg">
                                </span><b>Dave Junior</b>
                                <br><i>Last seen : 08:00 PM</i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>
                                    <img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/women/24.jpg">
                                </span><b>Kenneth Lucas</b>
                                <br><i>Last seen : 07:21 PM</i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>
                                    <img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/men/25.jpg">
                                </span><b>Heidi Perez</b>
                                <br><i>Last seen : 05:43 PM</i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>
                                    <img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/women/25.jpg">
                                </span><b>Kenneth Lucas</b>
                                <br><i>Last seen : 07:21 PM</i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>
                                    <img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/men/26.jpg">
                                </span><b>Heidi Perez</b>
                                <br><i>Last seen : 05:43 PM</i>
                            </a>
                        </li>


                    </ul>
                </div>
            </div>
        </div>
    </div>


    <!-- END OF RIGHT SLIDER CONTENT-->

    <!-- MAIN EFFECT -->
    <script type="text/javascript" src="assets/js/preloader.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
    <script type="text/javascript" src="assets/js/load.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>




</body>

</html>
